<script setup lang="ts">
import { computed, onMounted, ref } from "vue"
import useUserStore from "@/store/modules/user"
import { reqNotice } from "@/api/home/home"
import { NoticeData, NoticeResponseData } from "@/api/types/home"
// 权限枚举
const PermissionName: any = {
  User: ["用户", "User"],
  Role: ["角色", "Postcard"],
  Menu: ["菜单", "SetUp"],
  Department: ["部门", "Suitcase"],
  Position: ["岗位", "SuitcaseLine"],
  Log: ["日志", "Guide"],
  Operation: ["操作", "Location"],
}
const permissionBtn: any = {
  Add: "添加",
  Status: "状态",
  Edit: "编辑",
  Delete: "删除",
  Export: "导出",
  Import: "导入",
  Query: "获取",
  Person: "人员",
  Type: "类型",
  Equipment: "设备",
  Time: "日期",
  Allot: "分配",
  Demo: "测试",
}

// 用户公共数据
const useStoreUser = useUserStore()
// 最新通告内容
const noticeInfo = ref<NoticeData | null>()

// 处理按钮权限展示问题
const btnList = computed(() => {
  return (
    useStoreUser.buttons.map((v) => {
      // 处理权限名
      const firstArr = PermissionName[v.split(".")[0]][0]
      // 处理按钮名
      const lastArr =
        v.split(".")[2].slice(0, 1).toUpperCase() +
        v.split(".")[2].slice(1).toLocaleLowerCase()
      // 处理图标
      const iconArr = PermissionName[v.split(".")[0]][1]
      return {
        Name: firstArr + permissionBtn[lastArr],
        icon: iconArr,
      }
    }) || []
  )
})

// 获取最新通告
const getNotice = async () => {
  const { data: result }: NoticeResponseData = await reqNotice(useStoreUser.role[0])
  noticeInfo.value = result
}

onMounted(() => {
  getNotice()
})
</script>

<template>
  <div class="home">
    <el-card>
      <!-- 用户描述 -->
      <el-descriptions title="账号信息">
        <el-descriptions-item label="用户名">{{
          useStoreUser.username
        }}</el-descriptions-item>
        <el-descriptions-item label="账号名">{{
          useStoreUser.name
        }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag effect="dark" v-if="useStoreUser.role[0]" size="small">{{ useStoreUser.role[0] }}</el-tag>
          <span v-else>暂无</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
            {{ useStoreUser.createTime }}
        </el-descriptions-item>
        <el-descriptions-item label="上次登陆">
            {{ useStoreUser.lastTime }}
        </el-descriptions-item>
        <el-descriptions-item label="所属部门">
            <el-tag effect="dark" v-if="useStoreUser.department" type="info" size="small">
                {{ useStoreUser.department}}
            </el-tag>
          <span v-else>暂无</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 账号权限 -->
    <el-card>
      <div class="el-container">
        <!-- 用户权限展示 -->
        <el-aside>
          <h1>操作权限</h1>
          <div class="btnList" v-if="btnList.length>0">
            <div class="item" v-for="(item, index) in btnList" :key="index">
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span> {{ item.Name }} </span>
            </div>
          </div>
          <el-empty v-else description="暂无权限设置" />
        </el-aside>
        <!-- 通告内容展示 -->
        <div class="Notice">
            <div v-if="noticeInfo != null">
                <el-descriptions :column="1" title="最新公告">
                <el-descriptions-item label="通知标题 :">{{noticeInfo?.noticeTitle}}</el-descriptions-item>
                <el-descriptions-item label="发起人 :"> {{noticeInfo?.releaseNmae}}</el-descriptions-item>
                <el-descriptions-item label="开始时间 :">{{noticeInfo?.startTime}}</el-descriptions-item>
                <el-descriptions-item label="结束时间 :"> {{noticeInfo?.endTime}}</el-descriptions-item>
                </el-descriptions>
                <!-- 通知内容 -->
                <div v-html="noticeInfo?.noticeMessage"></div>
            </div>
            <el-empty v-else description="暂无最新通告" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.el-card {
  margin-bottom: 20px;
  .el-container {
    display: flex;
    & > *h1 {
      height: 40px;
      font-weight: bold;
    }
    .el-aside {
      flex: 60%;
      .btnList {
        display: flex;
        flex-wrap: wrap;
        margin-right: 10px;
        .item {
          width: 25%;
          height: 70px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-evenly;
          box-sizing: border-box;
          .el-icon {
            font-size: 24px;
          }
          span {
            font-size: 12px;
          }
        }
      }
    }
    .Notice {
      flex: 30%;
      padding: 10px;
    }
  }
}
</style>
